<template>
  <div>
    <h2>FlowDesigner 使用示例</h2>
    <FlowDesigner 
      v-model="workflowConfig"
      :api-config="apiConfig"
      @save="handleSave"
      @change="handleChange"
      @validate="handleValidate"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FlowDesigner from './FlowDesigner.vue'
// 导入你的API函数
import { getRoles, getDepartments, getEmployees, getConditions } from '@/api/index.js'

// 工作流配置数据
const workflowConfig = ref({
  // 你的工作流配置数据
})

// API配置 - 将具体的API函数传递给FlowDesigner组件
const apiConfig = {
  getRoles,
  getDepartments, 
  getEmployees,
  getConditions
}

// 事件处理函数
const handleSave = (config) => {
  console.log('保存工作流配置:', config)
  // 处理保存逻辑
}

const handleChange = (config) => {
  console.log('工作流配置变更:', config)
  // 处理配置变更
}

const handleValidate = (isValid) => {
  console.log('工作流配置验证结果:', isValid)
  // 处理验证结果
}
</script>

<style scoped>
/* 你的样式 */
</style>